<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="shopping">
  <meta name="description" content="shopping">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>shopping</title>
  <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="js/cart_3_pay.js"></script>
  <link rel="stylesheet" href="./css/cart_3_pay.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">

</head>

<body>
  <!-- 公共头部 -->
  <div class="contentHead">
    <div class="head">
      <div class="iconfont">
        <a href="#" class="icon pd-x_user"></a>
        <a href="#" class="icon pd-x_qrcode"></a>
        <a href="#" class="icon pd-x_phone"></a>
        <a href="#" class="icon pd-x_help"></a>
      </div>
      <div class="tel">
        <span class="icon pd-x_service"></span>
        <span class="server">服务热线</span>
        <span class="phone">400-1234-5678</span>
      </div>
    </div>
  </div>
  <!-- 头部搜索 -->
  <div class="search">
    <div class="logo">
      <img src="./images/logarea.png" alt="">
    </div>
    <div class="searchinfo">
      <div class="searchbox">
        <p>全部分类</p>
        <div class="line"></div>
        <input type="text" name="" id="" placeholder="搜索商品">
        <div class="right">
          <span class="icon pd-search_line"></span>
          <span class="sousuo">搜索</span>
        </div>
      </div>
    </div>
    <div class="myshop">
      <div class="bg">
        <span class="icon pd-x_cart"></span>
      </div>
      <div class="my">
        <p class="shop">我的购物车
          <span class="icon pd-baseicons82"></span>
        </p>
        <p class="pirce">￥ 0.00</p>
      </div>
    </div>
  </div>
  <!-- nav -->
  <div class="navT">
    <div class="nav">
      <img src="./images/nav1.png" alt="">
      <div class="navAll">
        <a href="#" style="padding-left: 72px" class="active">首页</a>
        <a href="#">限时秒杀</a>
        <a href="#">商品促销</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
      </div>
    </div>
  </div>

  <!-- 内容 -->
  <div class="cartTop">
    <div class="bg">
        <div class="pic">
            <img src="./images/cart_1_s.png" alt="">
        </div>
        <span class="text active">购物车</span>
    </div>
    <div class="bg bg1">
        <div class="pic">
                <img src="./images/cart_2_s.png" alt="">
        </div>
        <span class="text">确认订单</span>
    </div>
    <div class="bg bg1 bg2">
        <div class="pic">
            <img src="./images/cart_3_s.png" alt="">
        </div>
        <span class="text">付款</span>
    </div>
    <div class="bg bg1 bg3">
        <div class="pic">
            <img src="./images/cart_4_n.png" alt="">
        </div>
        <span class="text">支付成功</span>
    </div>
</div>
  <div class="buy-pay">
    <h3>成功提交订单</h3>
    <p>请您在 <span>00:59:55</span> 内完成支付，否则订单会被自动关闭。</p>
    <p>商城订单 <a href="#">支付流水号：153120298750831000</a></p>
    <p>支付人：<a>培迪用户</a></p>
    <p>应付订单总额：<span>￥87394.05</span></p>
    <div id="payment">
      <p>支付方式</p>
      <a class="active">支付宝</a>
      <a >微信</a>
    </div>
    <button class="payGo">立即支付</button>
  </div>
    <div id="go">
      <div class="top">支付状态</div>
      
    </div>
  <!-- 正品保障 -->
  <div class="real">
    <div class="realThing">
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="footer">
    <div class="footerTop">
      <div>
        <img src="./images/LOGO.png" alt="">
      </div>
      <div class="peisong">
        <dl>
          <dt>配送与支付</dt>
          <dd>货到付款区域</dd>
          <dd>配送支付智能查询</dd>
          <dd>支付方式说明</dd>
        </dl>
      </div>
      <div class="fuwu">
        <dl>
          <dt>服务保证</dt>
          <dd>退换货原则</dd>
          <dd>售后服务保证</dd>
          <dd>产品质量保证</dd>
        </dl>
      </div>
      <div class="fuwu">
        <dl>
          <dt>联系我们</dt>
          <dd>网站故障报告</dd>
          <dd>选机咨询</dd>
          <dd>投诉与建议</dd>
        </dl>
      </div>
    </div>
    <div class="line"></div>
    <div class="footerBottom">
      <img src="./images/qrcode.png" alt="">
      <div class="photo">
        <p>服务热线</p>
        <p>400-023-4567</p>
        <p>© 2018 WWW.SHOPPING.COM</p>
      </div>
    </div>
  </div>
</body>
<script src="./js/jquery.1.8.2.min.js"></script>
<script>
  $(".payGo").click(function(){
    $("#go").show();
  })
</script>
</html>